<!DOCTYPE html>
<html>
<head>
	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	
	<link href="images/reset.css?v={yun:}$config.cachecode{/yun}" rel="stylesheet" type="text/css" />
	<link href="images/system.css?v={yun:}$config.cachecode{/yun}" rel="stylesheet" type="text/css" />
	<link href="{yun:}$config.sy_weburl{/yun}/js/layui/css/layui.css?v={yun:}$config.cachecode{/yun}" rel="stylesheet" type="text/css" />
	
	<title>后台管理-图表分析</title>

	<style>
		.layui-form-item{
			margin-top: 10px;
			/*margin-left: 10px;*/
		}

		.layui-form-label{
			width: auto;
		}

		.sub-radio{
			margin-left:100px;
			border:1px dashed #c2c2c2;
			display:inline-block
		}

		.layui-btn{
			/*margin-left: 15px !important;*/
		}

		.layui-form{
			margin-left: 25px;
		}

		.layui-form-label{
			padding-left: 0px !important;
		}

		.layui-table{
			margin-left: 25px;
			width:95%;
		}
	  
		.page-nav{
			margin:10px 10px 10px 25px;
		}
	</style>

</head>

<body class="body_ifm">
<div class="infoboxp">

	<div class="tabs_info">
		<ul>
			<li><a href="index.php?m=crm_statis&c=performance&uid={yun:}$cuid{/yun}">客户数量</a></li>
			<li><a href="index.php?m=crm_statis&c=concern&uid={yun:}$cuid{/yun}">关怀记录</a></li>
			<li class="curr"><a href="index.php?m=crm_statis&c=amount&uid={yun:}$cuid{/yun}">成交金额</a></li>
		</ul>
	</div>

 	<div class="admin_new_tip">
		<div class="admin_new_tit"><i class="admin_new_tit_icon"></i>操作提示</div>
		<div class="admin_new_tip_list_cont">
			<div class="admin_new_tip_list">该页面展示了业务员：【{yun:}$aname{/yun}】成交金额统计 。</div>
		</div>
	</div>

	<form class="layui-form">
		
		<input type="hidden" name="pytoken" id="pytoken" value="{yun:}$pytoken{/yun}">

		<!--选择时间范围-->
		<div class="layui-form-item" id="time_range">
			<label class="layui-form-label">查询范围</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" id="time" style="width:355px;">
			</div>

			<div class="layui-input-inline">
				<input name="radio_time" value="0" title="今天" type="radio" lay-filter="radio_time"
        {yun:}if $radio_time == '0'{/yun}
        checked
        {yun:}/if{/yun}
        />
        <input name="radio_time" value="1" title="昨天" type="radio" lay-filter="radio_time"
        {yun:}if $radio_time == '1'{/yun}
        checked
        {yun:}/if{/yun}
        />
        <input name="radio_time" value="7" title="7天内" type="radio" lay-filter="radio_time"
        {yun:}if $radio_time == '7'{/yun}
        checked
        {yun:}/if{/yun}
        />
        <input name="radio_time" value="30" title="30天内" type="radio" lay-filter="radio_time"
        {yun:}if $radio_time == '30' || $radio_time == '-2'{/yun}
        checked
        {yun:}/if{/yun}
        />
        <input name="radio_time" value="90" title="90天内" type="radio" lay-filter="radio_time"
        {yun:}if $radio_time == '90'{/yun}
        checked
        {yun:}/if{/yun}
        />
        <input name="radio_time" value="-1" title="全部" type="radio" lay-filter="radio_time"
        {yun:}if $radio_time == '-1'{/yun}
        checked
        {yun:}/if{/yun}
        />
				<input type="hidden" name="isAllTime" id="isAllTime" value="0"/>
			</div>

			<div class="layui-input-inline">
				<button class="layui-btn" lay-filter="query" onclick="return query();">点击查询</button>
				<button class="layui-btn" onclick="return showDetail(this);">查看详情</button>
			</div>
		</div>

	</form>

	<div class="admin_index_statistics" style="display:block;">
		<div class="admin_index_statistics_box">
			<div class="admin_index_statistics_list">
				<div class="admin_index_statistics_list_c">
					<a class="admin_index_statistics_list_b">
						<div class="admin_index_statistics_tit">成交金额</div>
						<div class="admin_index_statistics_n"><span class="admin_index_statistics_fh">￥</span>{yun:}$data[3]['all']{/yun}</div>
						
						<div class="admin_index_statistics_time">
							<ul>
								<li><div class="admin_index_statistics_time_t">本月</div><div class="admin_index_statistics_time_n">{yun:}$data[0]['all']{/yun}</div></li>
								<li><div class="admin_index_statistics_time_t">本周</div><div class="admin_index_statistics_time_n">{yun:}$data[1]['all']{/yun}</div></li>
								<li class=" admin_index_statistics_time_t_end">
									<div class="admin_index_statistics_time_t">昨日</div>
									<div class="admin_index_statistics_time_n">{yun:}$data[2]['all']{/yun}</div>
								</li>
							</ul>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>

	<div class="admin_atatic_chart fl " id="chart" style="width:1200px; height:300px; margin-left: 25px;"></div>
  
	<table class="layui-table" lay-skin="nob" style="display: none;" id="detail">
		<thead>
			<tr id="detail_thead">
				<th>日期</th>
				<th>成交金额</th>
			</tr> 
		</thead>
		<tbody id="detail_tbody">
			{yun:}foreach from=$names item=date key=k{/yun}
			<tr>
				<td>{yun:}$date{/yun}</td>
				<td>{yun:}$values[0]['data'][$k]{/yun}</td>
			</tr>
			{yun:}/foreach{/yun}

			<tr>
				<td>总计</td>
				<td>{yun:}$totalAll{/yun}</td>
			</tr>
		</tbody>
	</table>

</div>

<script src="{yun:}$config.sy_weburl{/yun}/js/layui/layui.js?v={yun:}$config.cachecode{/yun}"></script>
<script src="{yun:}$config.sy_weburl{/yun}/js/layui/phpyun_layer.js?v={yun:}$config.cachecode{/yun}"></script>
<script src="{yun:}$config.sy_weburl{/yun}/js/echarts_plain.js?v={yun:}$config.cachecode{/yun}"></script>
<script src="{yun:}$config.sy_weburl{/yun}/js/jquery-1.8.0.min.js?v={yun:}$config.cachecode{/yun}"></script>

<script>
    function getDateTimeStr(timestamp){
		var d = new Date(timestamp);    //根据时间戳生成的时间对象
		var h = d.getHours(),
			m = d.getMinutes(),
			s = d.getSeconds(),
			month = d.getMonth() + 1,
			day = d.getDate();

		h = h < 10 ? '0' + h : h;
		m = m < 10 ? '0' + m : m;
		s = s < 10 ? '0' + s : s;

		month = month < 10 ? '0' + month : month;
		day = day < 10 ? '0' + day : day;

		return (d.getFullYear()) + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
    }

    function getToday(){
		var today = new Date();
		
		today.setHours(0);
		today.setMinutes(0);
		today.setSeconds(0);
		today.setMilliseconds(0);
		
		return today;
    }
    
    layui.use(['form', 'laydate'], function(){
		var laydate = layui.laydate
			,form = layui.form
			,$ = layui.$;

		laydate.render({
			elem : '#time' //指定元素
			,type : 'datetime'
			,range : '~'
			,value : '{yun:}$defaultTime{/yun}'
		});

		form.on('radio(radio_time)', function(data){
			if(data.value == -1){
				window.location = 'index.php?m=crm_statis&c=amount&uid={yun:}$cuid{/yun}&isAllTime=1&radio_time=' + data.value;
			}else{
				var today = getToday();
				var diff = 1000 * 60 * 60 * 24 * data.value;
				var day = new Date(today - diff);
				var str = getDateTimeStr(Date.parse(day)) + ' ~ ' + getDateTimeStr(Date.parse(new Date()));  
				window.location = 'index.php?m=crm_statis&c=amount&uid={yun:}$cuid{/yun}&time=' + str + '&radio_time=' + data.value;
			}
		});

		var title = '{yun:}$title{/yun}';
		var names = [
			{yun:}foreach from=$names item=v{/yun}
				'{yun:}$v{/yun}',
			{yun:}/foreach{/yun}
		];

		var dataGroupNames = [
			'成交金额'
		];

		var values = [
			{yun:}foreach from=$values item=v{/yun}
				{
					name : '{yun:}$v["name"]{/yun}',
					type : '{yun:}$v["type"]{/yun}',
					label: {
						normal: {
							show:true,
							position: 'top',
							textStyle: {
								color: '#27727B'
							}
						}
					},
				  data : [
					{yun:}foreach from=$v["data"] item=r{/yun}
					parseFloat('{yun:}$r{/yun}'),
					{yun:}/foreach{/yun}
				  ]
				},
			{yun:}/foreach{/yun}
		];

		refreshBarChart(title, names, values, dataGroupNames);
    });//end layui.use()

    function query(){
		window.location = 'index.php?m=crm_statis&c=amount&uid={yun:}$cuid{/yun}&time=' + $("#time").val();
		return false;
    }

    function refreshBarChart(title, names, values, dataGroupNames){
		var option = {
			tooltip : {
				trigger: 'axis',
				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},

			title: {
				text: title,
				subtext: '{yun:}$config.sy_webname{/yun}'
			},
			legend: {
				data: dataGroupNames
			},
			xAxis : [
				{
					type : 'category',
					data : names
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : values,
		};

		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('chart'));

		// 使用刚指定的配置项和数据显示图表。
		 myChart.setOption(option);
    }

    //查看详情
    var flag = true;
    function showDetail(o){
		if(flag){
			$("#chart").hide();
			$("#detail").show();
			flag = false;
			$(o).html('查看图表');
		}else{
			$("#detail").hide();
			$("#chart").show();
			flag = true;
			$(o).html('查看详情');
		}
		return false;
    }
</script>
</body>
</html>